<template>
  <Page>
    <el-row :gutter="12" class="pt-0">
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <el-card shadow="hover" class="custom-box-card card-1">
          <el-skeleton :rows="5" :loading="loading" style="width: 100%">
            <template #default>
              <el-row justify="space-between" align="middle">
                <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="17">
                  <div>
                    <h3 class="my-2 text-3xl">Element Plus</h3>
                    <p class="mb-2">开箱即用的中台前端/设计解决方案</p>
                    <ul class="text-xs leading-6">
                      <li class="truncate"
                        ><el-badge
                          is-dot
                          type="info"
                          class="mr-2"
                        />内置常用模板，无需考虑交互排版，助你高效开发</li
                      >
                      <li class="truncate"
                        ><el-badge is-dot type="info" class="mr-2" />样式美观大方，无缝对接 Element
                        Plus，随意组合页面，随心所欲</li
                      >
                      <li class="truncate"
                        ><el-badge
                          is-dot
                          type="info"
                          class="mr-2"
                        />丰富的布局模式，具有高可配性，满足您的各类布局需求</li
                      >
                      <li class="truncate"
                        ><el-badge
                          is-dot
                          type="info"
                          class="mr-2"
                        />优质的售后技术支持，完善的文档，让您事半功倍</li
                      >
                    </ul>
                  </div>
                  <div class="flex items-center mt-3">
                    <div class="text-xs">评价：</div>
                    <div
                      ><el-rate
                        v-model="rateValue"
                        disabled
                        show-score
                        text-color="#ff9900"
                        score-template="{value}分"
                        size="large"
                      />
                    </div>
                  </div>
                  <div class="flex items-center">
                    <div class="text-xs">畅销：</div>
                    <div
                      ><el-rate
                        v-model="rateValue"
                        disabled
                        show-score
                        text-color="#ff9900"
                        score-template="{value}分"
                        size="large"
                      />
                    </div>
                  </div>
                </el-col>
                <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="7">
                  <el-image :src="salesDashboard" fit="contain" />
                </el-col>
              </el-row>
            </template>
          </el-skeleton>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <el-row :gutter="12">
          <el-col :span="12">
            <el-card shadow="hover" class="custom-box-card">
              <el-skeleton :rows="2" :loading="loading" style="width: 100%">
                <template #default>
                  <div class="flex justify-between mb-3">
                    <div>
                      <h3 class="text-base">访问量</h3>
                      <div class="pt-1">
                        <CountTo :startVal="1" :endVal="info.visits.dayVisits" class="text-2xl" />
                      </div>
                    </div>
                    <div>
                      <el-icon :size="30" :color="`var(--el-color-primary)`">
                        <SignalFilled />
                      </el-icon>
                    </div>
                  </div>
                  <div class="summary"
                    >增长幅度<el-tag class="ml-2" type="success">+7%</el-tag></div
                  >
                </template>
              </el-skeleton>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="hover" class="custom-box-card"
              ><el-skeleton :rows="2" :loading="loading" style="width: 100%">
                <template #default>
                  <div class="flex justify-between mb-3">
                    <div>
                      <h3 class="text-base">销售额</h3>
                      <div class="pt-1">
                        <CountTo
                          prefix="￥"
                          :startVal="1"
                          :endVal="info.saleroom.weekSaleroom"
                          class="text-2xl"
                        />
                      </div>
                    </div>
                    <div>
                      <el-icon :size="30" :color="`var(--el-color-warning)`">
                        <TrophyTwotone />
                      </el-icon>
                    </div>
                  </div>
                  <div class="summary">下降幅度<el-tag class="ml-2" type="danger">-3%</el-tag></div>
                </template>
              </el-skeleton></el-card
            >
          </el-col>
          <el-col :span="12">
            <el-card shadow="hover" class="custom-box-card"
              ><el-skeleton :rows="2" :loading="loading" style="width: 100%">
                <template #default>
                  <div class="flex justify-between mb-3">
                    <div>
                      <h3 class="text-base">订单量</h3>
                      <div class="pt-1">
                        <CountTo
                          :startVal="1"
                          :endVal="info.orderLarge.weekLarge"
                          class="text-2xl"
                        />
                      </div>
                    </div>
                    <div>
                      <el-icon :size="30" :color="`var(--el-color-success)`">
                        <AccountBookTwotone />
                      </el-icon>
                    </div>
                  </div>
                  <div class="summary"
                    >下降幅度<el-tag class="ml-2" type="danger">-35%</el-tag></div
                  >
                </template>
              </el-skeleton></el-card
            >
          </el-col>
          <el-col :span="12">
            <el-card shadow="hover" class="custom-box-card"
              ><el-skeleton :rows="2" :loading="loading" style="width: 100%">
                <template #default>
                  <div class="flex justify-between mb-3">
                    <div>
                      <h3 class="text-base">成交额</h3>
                      <div class="pt-1">
                        <CountTo
                          prefix="￥"
                          :startVal="1"
                          :endVal="info.volume.weekLarge"
                          class="text-2xl"
                        />
                      </div>
                    </div>
                    <div>
                      <el-icon :size="30" :color="`var(--el-color-danger)`">
                        <DollarCircleTwotone />
                      </el-icon>
                    </div>
                  </div>
                  <div class="summary"
                    >增长幅度<el-tag class="ml-2" type="success">+23%</el-tag></div
                  >
                </template>
              </el-skeleton></el-card
            >
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-row :gutter="12">
      <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
        <el-card shadow="hover" class="custom-box-card">
          <template #header>
            <div class="card-header">
              <span class="text-base">会员增长趋势</span>
            </div>
          </template>
          <el-skeleton :rows="6" :loading="loading" style="width: 100%">
            <template #default>
              <NewVisitAmount />
            </template>
          </el-skeleton>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
        <el-card shadow="hover" class="custom-box-card card-4">
          <el-skeleton :rows="5" :loading="loading" style="width: 100%">
            <!-- 自定义骨架屏 start -->
            <template #template>
              <el-skeleton-item
                variant="image"
                style="width: 60px; height: 60px; margin: 14px auto 0"
              />
              <div style="padding-top: 20px">
                <el-skeleton-item variant="h3" style="width: 60%; height: 28px; margin: 0 auto" />
              </div>
              <div style="padding-top: 20px">
                <el-skeleton-item variant="p" style="width: 50%; height: 14px; margin: 0 auto" />
              </div>
              <div style="padding-top: 10px">
                <el-skeleton-item variant="p" style="width: 40%; height: 14px; margin: 0 auto" />
              </div>
              <div style="padding-top: 10px">
                <el-skeleton-item
                  variant="button"
                  style="width: 50%; height: 30px; margin: 0 auto"
                />
              </div>
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  padding: 20px;
                "
              >
                <el-skeleton-item variant="text" style="width: 30%" />
                <el-skeleton-item variant="text" style="width: 30%" />
                <el-skeleton-item variant="text" style="width: 30%" />
              </div>
            </template>
            <!-- 自定义骨架屏 end -->
            <template #default>
              <div class="pt-4 logo">
                <img src="~@/assets/images/logo.png" alt="Admin Pro" class="img" />
              </div>
              <h3>NaiveAdmin</h3>
              <p class="mt-4 word">开箱即用的中台前端<br />设计解决方案</p>
              <div class="btn">
                <el-button type="primary" size="large" round @click="goUrl"
                  >去官网看看</el-button
                ></div
              >
              <div class="mt-6">
                <el-space wrap>
                  <el-tag effect="dark" :hit="true" color="#7816ff">多生态支持</el-tag>
                  <el-tag effect="dark" color="#00b42a">丰富功能</el-tag>
                  <el-tag effect="dark" color="#ff7d00" class="hidden-lg-only">实用组件</el-tag>
                </el-space>
              </div>
            </template>
          </el-skeleton>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="12">
      <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
        <el-card shadow="hover" class="custom-box-card">
          <el-skeleton :rows="5" :loading="loading" style="width: 100%">
            <template #default>
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="date" label="姓名">
                  <template #default="scope">
                    <div class="flex items-center">
                      <el-avatar :size="40" :alt="scope.row.name" :src="scope.row.avatar" />
                      <p class="ml-4">{{ scope.row.name }}</p>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="isMember" label="是否会员" align="center">
                  <template #default="scope">
                    <el-tag :type="scope.row.isMember ? 'success' : 'danger'">{{
                      scope.row.isMember ? '是' : '否'
                    }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="telephone" label="手机" align="center" />
                <el-table-column prop="date" label="购买日期" align="center" />

                <el-table-column label="操作" align="center">
                  <template #default="scope">
                    <el-link href="javascript:;" type="primary">编辑</el-link>
                    <el-divider direction="vertical" />
                    <el-popconfirm :title="`您确认要删除 ${scope.row.name} 吗？`">
                      <template #reference>
                        <el-link href="javascript:;" type="primary">删除</el-link>
                      </template>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-skeleton>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
        <el-card shadow="hover" class="custom-box-card card-6">
          <template #header>
            <div class="flex items-center justify-between card-header">
              <span class="text-base">评论</span>
              <el-link href="#" target="_blank" type="primary">更多</el-link>
            </div>
          </template>
          <el-skeleton :rows="5" :loading="loading" style="width: 100%">
            <template #default>
              <ul>
                <li v-for="(item, index) of comment" :key="index" class="flex py-3 items-top">
                  <el-avatar :size="36" :src="item.avatar" />
                  <div class="flex-grow ml-3">
                    <div class="flex items-center justify-between">
                      <span>{{ item.name }}</span>
                      <span :style="`color: var(--el-text-color-secondary)`" class="text-xs">{{
                        item.datetime
                      }}</span>
                    </div>
                    <p>{{ item.content }}</p>
                  </div>
                </li>
              </ul>
            </template>
          </el-skeleton>
        </el-card>
      </el-col>
    </el-row>
  </Page>
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue';
  import 'element-plus/theme-chalk/display.css';
  import NewVisitAmount from './components/NewVisitAmount.vue';
  import { getConsoleInfo } from '@/api/dashboard/console';
  import { CountTo } from '@/components/CountTo/index';

  import salesDashboard from '@/assets/images/sales-dashboard.svg';
  import schoolboy from '@/assets/images/schoolboy.png';
  import {
    SignalFilled,
    TrophyTwotone,
    DollarCircleTwotone,
    AccountBookTwotone,
  } from '@vicons/antd';

  const loading = ref(true);
  const rateValue = ref(5);
  const info = reactive<any>({
    saleroom: {},
    orderLarge: {},
    visits: {},
    volume: {},
  });

  onMounted(async () => {
    const res = await getConsoleInfo();
    info.saleroom = res.saleroom;
    info.orderLarge = res.orderLarge;
    info.visits = res.visits;
    info.volume = res.volume;
    loading.value = false;
  });

  function goUrl() {
    window.open('https://www.naiveadmin.com', '_blank');
  }

  const comment = [
    {
      id: 1,
      name: '武军',
      avatar: schoolboy,
      content: '这个系统太好用了',
      datetime: '5分钟前',
    },
    {
      id: 2,
      name: '顾平',
      avatar: schoolboy,
      content: 'UI界面有两下子',
      datetime: '1小时前',
    },
    {
      id: 3,
      name: '何军',
      avatar: schoolboy,
      content: '颜值有点高呀',
      datetime: '1天前',
    },
    {
      id: 4,
      name: '朱一龙',
      avatar: schoolboy,
      content: '给作者点赞',
      datetime: '2个月前',
    },
    {
      id: 5,
      name: '夏勇',
      avatar: schoolboy,
      content: '还是多提宝贵建议吧',
      datetime: '3年前',
    },
  ];

  const tableData = [
    {
      id: 1,
      name: '黎磊',
      avatar: schoolboy,
      isMember: true,
      telephone: '1281391234',
      date: '2021-12-14',
    },
    {
      id: 2,
      name: '周强',
      avatar: schoolboy,
      isMember: true,
      telephone: '1281391234',
      date: '2021-12-14',
    },
    {
      id: 3,
      name: '常静',
      avatar: schoolboy,
      isMember: true,
      telephone: '1281391234',
      date: '2021-12-14',
    },
    {
      id: 4,
      name: '尹丽',
      avatar: schoolboy,
      isMember: true,
      telephone: '1281391234',
      date: '2021-12-14',
    },
    {
      id: 5,
      name: '江秀英',
      avatar: schoolboy,
      isMember: false,
      telephone: '1281391234',
      date: '2021-12-14',
    },
    {
      id: 6,
      name: '杜杰',
      avatar: schoolboy,
      isMember: true,
      telephone: '1281391234',
      date: '2021-12-14',
    },
  ];
</script>

<style lang="scss" scoped>
  // 右侧内容区域背景色
  .admin-layout-content-main {
    background: var(--el-bg-color);
  }
  // 处理栅格
  .el-row {
    padding-top: 6px;
    margin: -6px;
    .el-row {
      padding-top: 0;
    }
  }
  .el-col {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  // 卡片定制
  .custom-box-card {
    border: none;
  }

  .el-rate--large {
    height: 20px;
  }
  .el-rate .el-rate__decimal {
    position: absolute;
  }

  @media (max-width: 1199px) {
    .mb12 {
      margin-bottom: 12px;
    }
  }

  .card-1 {
    min-height: 286px;
    li {
      sup {
        top: auto;
      }
    }
  }
  .prefix {
    font-size: 20px;
  }

  .card-4 {
    height: 351px;
    text-align: center;
    h3 {
      margin: 10px 0;
      font-size: 28px;
    }
    .logo {
      width: 60px;
      margin: 0 auto;
    }
    .price {
      margin: 15px 0;
    }
    .word {
      margin-bottom: 15px;
    }
    .el-tag--dark {
      border: none;
    }
  }

  .card-6 {
    .el-card__body {
      padding: 15px 20px;
    }
  }
</style>
